<!--
 * @Description: 轮播表
 * @Author: luoguomei
-->
<template>
  <div class="table-panel" ref="tableBox" :style="{pointerEvents:isOperable?'auto':'none'}">
    <ScrollBoard class="light-theme" v-if="visible" :config="config" @click="clickHandler" />
    <Pagination class-name="screen-page" v-model:current="pageIndex" v-model:page-size="pageSize" :total="contentTotal"
      :show-total="total => `共${total}条`" @change="changePage">
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </Pagination>
  </div>
</template>
<script setup>
  import Pagination from "@/components/AntdDesign/Pagination/Pagination.vue";
  import {
    ScrollBoard
  } from '@kjgl77/datav-vue3'
  import {
    ref,
    reactive,
    watch,
    computed,
    onMounted,
    onUnmounted,
    nextTick
  } from "vue";
  import {
    cloneDeep,
    uniqWith,
    debounce
  } from "lodash"; //数据深拷贝
  import {
    useBigScreenStore
  } from "@/stores/sketchRule.js";
  let visible = ref(true)
  let observer = ref(null)
  let tableBox = ref(null)
  let emits = defineEmits(['change-table', "change-linkage"])
  let pageSize = ref(10)
  let originalData = ref(null) //原始数据
  let pageIndex = ref(1)
  let contentTotal = ref(0)
  const props = defineProps({
    value: {
      type: [Object, Array],
    },
    isOperable: {
      type: Number,
      default: 0
    },
    columnData: {
      type: Object,
    },
    total: {
      type: [Number, String],
    },
    styles: {
      type: [Object, Array],
      default: () => new Array(),
    },
    id: {
      type: String
    },
    width: {
      type: Number
    }
  });

  let bigScreenStore = useBigScreenStore();
  let activeConfig = computed(() => bigScreenStore.activeItemConfig);
  let stylesForm = ref({});
  const comWidth = ref(0)
  const config = reactive({
    header: [],
    data: [],
    index: false, //是否显示行号
    align: ['center'],
    headerBGC: '#A7A7A7', //表头背景色
    oddRowBGC: '', //奇数行背景色
    evenRowBGC: '', //偶数行背景色
    waitTime: 2000, //轮播时间间隔
    columnWidth: [], //列宽度
  })

  const onWidthColumn = wid => { //列宽度变换
    config.columnWidth = []
    for (let i = 0; i < config.header.length; i++) {
      config.columnWidth.push(comWidth.value / config.header.length)
    }
  }

  watch(() => props.value, (n, o) => {
    config.header = []
    config.data = []
    if (n) {
      if (n instanceof Array) {
        if (props.columnData && Object.keys(props.columnData).length) {
          let keys = props.value.length ? Object.keys(props.value[0]) : []
          config.header = keys.map((o, i) => {
            return props.columnData[o].label
          })
          config.data = props.value.map((o, i) => {
            return Object.values(o)
          })
          originalData.value = cloneDeep(props.value)
        }
      } else {
        config.header = n.header
        config.data = n.data
      }
      comWidth.value = props.width
      onWidthColumn()
    }
  }, {
    immediate: true,
    deep: true
  });
  const mouseoverHandler = e => {
    console.log(e)
  }

  const clickHandler = (data) => {
    console.log(data, config)
    if (originalData.value) {
      let list = []
      let target = originalData.value[data.rowIndex]
      for (const key in target) {
        list.push({
          originalKey: key,
          originalValue: target[key],
        })
      }
      emits("change-linkage", list);
    }

  }

  function changePage(index, size) {
    // 分页切换
    pageIndex.value = index
    pageSize.value = size
    emits("change-table", {
      pageIndex: index,
      pageSize: size,
    })
  }
  watch(() => props.styles, (val) => {
    stylesForm.value = val
    config.headerBGC = val.headerBackgroundColor
  }, {
    immediate: true,
    deep: true
  });
  watch(() => props.width, (n, o) => {
    if (n) {
      comWidth.value = n
      onWidthColumn()
    }
  }, {
    deep: true,
    immediate: true
  });
  watch(() => props.total, (val) => {
    if (val) {
      contentTotal.value = Number(val)
    } else {
      contentTotal.value = 0
    }

  }, {
    immediate: true,
    deep: true
  });


  function changeVisible() {
    visible.value = false
    nextTick(() => {
      visible.value = true
    });
  }

  function closeObserver() { // 推出观察者模式
    if (observer.value) {
      observer.value.disconnect();
      if (tableBox.value) {
        observer.unobserve(tableBox.value);
      }
      observer.value = null;
    }
  }
  let listen = debounce((entries) => {
    return (() => {
      // 观察echarts变化
      for (let entry of entries) {
        const {
          width,
          height
        } = entry.contentRect;
        changeVisible()
        // 在这里可以执行相应的操作，根据div的大小变化调整布局或其他操作
      }
    })(entries)
  }, 200)
  onMounted(() => {
    closeObserver();
    setTimeout(() => {
      if (tableBox.value) {
        observer.value = new ResizeObserver(listen);
        observer.value.observe(tableBox.value);
      }
    }, 0)
  })
  onUnmounted(() => {
    closeObserver()
  })
</script>
<style lang="scss" scoped>
  .table-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .light-theme {
    background-color: #151a26;
    color: #fff;
  }
</style>